<template>
  <base-view class="custom" :model="query" @submit="search">
    <template v-slot:params>
      <a-col :span="8">
        <a-form-model-item label="收单机构">
          <a-select v-model="query.signInstId" default-value="Option1" @click.native="getInstIdOrganizationList()">
            <a-select-option value="">
              -请选择-
            </a-select-option>
            <a-select-option v-for="item in signInstIdList" :key="item.value" :value="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="商户名称">
          <a-select v-model="query.mchntNo" default-value="Option1" @click.native="getMchntList()">
            <a-select-option value="">
              -请选择-
            </a-select-option>
            <a-select-option v-for="item in mchntList" :key="item.value" :value="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="活动费率">
          <a-input v-model="query.activityFeeRate" placeholder="请输入活动费率" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="活动结果">
          <a-input v-model="query.activityApplyStatus" placeholder="请输入活动结果" />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item class="search">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
        </a-form-model-item>
      </a-col>
    </template>
    <div class="section">
      <div class="btn-group">
        <a-button type="primary" @click="modalVisible = true">
          <span>申请</span>
        </a-button>
      </div>

      <a-table
        :rowSelection="{ hideDefaultSelections: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
        ref="TableInfo" :columns="columns" :rowKey="(record, index) => {return index;}
        " @change="pageChange" @showSizeChange="pageChange" :dataSource="dataSource" :pagination="pagination"
        :loading="loading" :scroll="{ x: 1050 }">
        <template slot="operation" slot-scope="text, record">
          <a-icon type="eye" @click="view(record)" title="查看"></a-icon>
        </template>
      </a-table>
    </div>

    <a-modal v-model="modalVisible" :title="modalTitle" width="1050px" @ok="submit()" :maskClosable="false"
      :footer="isHideFoot ? null : undefined">
      <wechat-activities-operation ref="modalForm"></wechat-activities-operation>
    </a-modal>
  </base-view>
</template>

<script>
import wechatActivitiesOperation from "./wechatActivitiesOperation";
import { mapState } from "vuex"

export default {
  name: 'wechatActivities',
  components: { wechatActivitiesOperation},
  data: function () {
    return {
      modalVisible: false,
      isHideFoot: false,
      modalTitle: "申请",
      operationType: 'apply',
      query: {
        instId: "",
        signInstId: "",
        mchntNo: "",
        activityFeeRate: "",
        activityApplyStatus: "",
      },
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      selectedRowKeys: [],
      selectedInfo: [],
      columns: [
        {
          title: '收单机构',
          dataIndex: 'signInstName',
          width: 120
        },
        {
          title: '商户号',
          dataIndex: 'mchntNo',
          width: 120
        },
        {
          title: '商户名称',
          dataIndex: 'mchntName',
          width: 120
        },
        {
          title: '商户状态',
          /**
           * 00 非正式
           * 01 正式
           * 02 停用
           * 03 已注销
           */
          dataIndex: 'mchntStatus',// 00 实体  01 虚拟
          width: 120,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "非正式";
              case "01":
                return "正式";
              case "02":
                return " 停用";
              case "03":
                return "已注销";
            }
          },
        },
        {
          title: '活动申请状态',
          dataIndex: 'activityApplyStatus',// ？？？？未申请
          width: 120
        },
        {
          title: '活动申请单号',
          dataIndex: 'activityApplyId',// 00 实体  01 虚拟
          width: 120
        },
        {
          title: '活动费率',
          dataIndex: 'activityFeeRate',// 00 实体  01 虚拟
          width: 120
        },
        {
          title: '活动申请结果',
          dataIndex: 'activityApplyResult',//？？未申请
          width: 120
        },
        {
          title: '活动申请拒绝原因',
          dataIndex: 'applyRefuseResoan',// 00 实体  01 虚拟
          width: 150
        },
        {
          title: '操作',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
          width: 120
        }
      ],
      dataSource: [],
      signInstIdList: [],
      mchntList: [],
    }
  },
   computed: {
    ...mapState({
      currentUser: state => state.account.user
    })
  },
  methods: {

    edit(item) {
      this.modalVisible = true
    },
    view(item) { },

    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
      this.search();
    },
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.pageNum = this.pagination.defaultCurrent;
        this.pagination.pageSize = this.pagination.defaultPageSize;
        await this.search();
      }
    },
    async reset() {
      this.query.instId=''
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      if (!this.currentUser.admin) {
        this.query.instId = this.currentUser.instId;
      }
      await this.search();
    },
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      console.log(e);
      try {
        const res = await this.$get("/admin/merParam/wechatActivities/list", {
          instId: this.query.instId,
          mchntNo:this.query.mchntNo,
          signInstId: this.query.signInstId,
          activityFeeRate: this.query.activityFeeRate,
          activityApplyStatus: this.query.activityApplyStatus,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    async getInstIdOrganizationList() {
      try {
        const res = await this.$get("/admin/merParam/UpmpOrganization/instIdOrganizationSelect2List", {
          q: encodeURIComponent(`&${this.query.instId}`)
        });
        if (res.status === 200) {
          this.signInstIdList = res.data.results.map(i => {
            i.value = i.id
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getMchntList() {
      try {
        const res = await this.$get("/admin/mcmp/bMchntBaseInfo/mchntFormalSelect2List", {
          q: encodeURIComponent(`&${this.query.instId}`)
        });
        if (res.status === 200) {
          this.mchntList = res.data.rows.map(i => {
            i.value = i.mchntNo
            i.name = i.mchntName
            return i
          })
        }
      } catch (e) {
        console.error(e);
      }
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedInfo = this.batchDataSource[selectedRowKeys[0]];
    },
  }
}
</script>

<style scoped>
.page {
  width: 100%;
}

.section {
  background: #fff;
}

.form {
  text-align: center;
}

.select {
  width: 180px;
}

.btn-group {
  margin-bottom: 20px;
}

.subtitle {
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}
</style>
